<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
    class="abow_dialog"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.show"
    >
      <el-form-item label="角色名称：" prop="name">
        <el-input
          v-model="form.name"
          style="width:200px;"
          size="mini"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色描述：" prop="description">
        <el-input
          v-model="form.description"
          style="width:200px;"
          size="mini"
          placeholder="请输入角色描述"
        ></el-input>
      </el-form-item>

      <el-form-item label="上级角色：" prop="parentId">
        <el-select
          v-model="form.parentId"
          placeholder="请选择上级角色"
          size="mini"
        >
          <el-option
            v-for="(data, index) in this.roleSelect"
            :key="index"
            :label="data.value"
            :value="data.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限控制：" prop="sysPermissionId">
        <el-tree
          :data="treeData"
          ref="vuetree"
          default-expand-all
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @check="oncheck"
        >
        </el-tree>
      </el-form-item>
    </el-form>
    <div class="operate-footer" v-if="!dialogObj.view">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import {
  getsysPermissionListApi,
  addRoleInfoApi,
  getPermissionApi,
  getRoleSelectApi
} from "@s/api";

export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ],
        parentId: [
          { required: true, message: "请选择上级角色", trigger: "blur" }
        ],
        sysPermissionId: [
          {
            type: "array",
            required: true,
            message: "请选择权限",
            trigger: "blur"
          }
        ]
      },
      form: {
        name: "",
        description: "",
        parentId: "",
        sysPermissionId: []
      },
      treeData: [],
      roleSelect: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  mounted() {
    this.getRoleSelect();
  },
  methods: {
    init() {
      if (this.dialogObj.id) {
        this.form.name = this.dialogObj.form.name;
        this.form.description = this.dialogObj.form.description;
        this.form.parentId = this.dialogObj.form.parentId;
        this.getList();
      } else {
        this.form.name = "";
        this.form.description = "";
        this.form.parentId = "";
        this.getList();
      }
    },
    // 获取角色类型列表
    getRoleSelect() {
      getRoleSelectApi().then(res => {
        let newRoleList = [];
        res.forEach(item => {
          var newItem = {
            id: item.roleId,
            value: item.name
          };
          newRoleList.push(newItem);
        });
        this.roleSelect = newRoleList;
      });
    },
    selectList() {
      var json = {
        roleId: this.dialogObj.form.roleId
      };
      getPermissionApi(json).then(res => {
        // 权限树处理
        let selectArr = [];
        let newSelect = [];
        res.forEach(item => {
          if (item.isParent) {
            item.children = [];
            selectArr.push(item);
          }
        });
        selectArr.forEach(item => {
          res.forEach(v => {
            if (v.parentId == item.id) {
              item.children.push(v);
            }
          });
        });
        selectArr.map(item => {
          newSelect.push(...item.children);
        });
        var _this = this;
        this.$nextTick(function() {
          _this.$refs.vuetree.setCheckedNodes(newSelect);
        });
      });
    },
    getList() {
      getsysPermissionListApi({}).then(res => {
        // 权限树处理
        let arr = [];
        res.forEach(item => {
          if (item.isParent) {
            item.children = [];
            arr.push(item);
          }
        });
        arr.forEach(item => {
          res.forEach(v => {
            if (v.parentId == item.id) {
              item.children.push(v);
            }
          });
        });
        this.treeData = arr;
        if (this.dialogObj.id) {
          this.selectList();
        }
      });
    },
    updateSub() {
      let json = {
        description: this.form.description,
        name: this.form.name,
        parentId: this.form.parentId,
        permissionIds: this.form.sysPermissionId,
        roleId: this.dialogObj.id ? this.dialogObj.id : undefined
      };
      addRoleInfoApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        if (this.dialogObj.id) {
          this.$message({
            type: "success",
            message: "编辑权限成功！"
          });
        } else {
          this.$message({
            type: "success",
            message: "添加角色成功！"
          });
        }
      });
    },
    oncheck(checkedkeys, info) {
      //合并子父节点
      this.form.sysPermissionId = [
        ...info.checkedKeys,
        ...info.halfCheckedKeys
      ];
    },
    sub: _debounce(function() {
      // this.form.sysPermissionId = this.form.sysPermissionId.length === 0 ? this.$refs.vuetree.getCheckedKeys() : this.form.sysPermissionId;
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.updateSub();
        }
      });
    })
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.init();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.operate-footer {
  text-align: center;
}
</style>
